<template>
  <div class="box_1">
    <bigscreen-header :headerName="'牧户：' + `${muHuName}`" />

    <div class="w_full h_full-70 flex_row_between">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <!-- 饼图 -->
        <div class="w_full h_49_p chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center">牲畜数量</div>
          <kong-xin-bing-tu :value="data1" />
        </div>

        <div class="w_full h_49_p chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center">机械数量</div>
          <bing-tu :value="data2" />
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p flex_column_between chart_box_bgi">
          <!-- <hao-rao-qin-hamlet /> -->
          <div class="w_full chart_title h_30 lh_30 text_center fs_18">
            牧户信息
          </div>

          <div class="w_full h_70_p p_10 relative">
            <img class="h_80_p object_fit_cover border_radius_10 absolute_center" v-if="muHuDetailData.avatarUrl" :src="muHuDetailData.avatarUrl" alt="">
            <img class="h_70_p border_radius_10 response_img" v-else src="../../../../assets/images/user/user-avatar.svg" alt="">
          </div>

          <div class="w_full h_25_p color_fff p_10">
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">牧户姓名：<span class="main_color">{{ muHuName }}</span> </div>
            </div>
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">所在镇（苏木）： <span class="main_color">{{ muHuDetailData.townName }}</span> </div>
              <!-- <div class="h_24 lh_24 mb_3">草场面积：<span class="main_color font_number fw_bold ls_2">578 ㎡</span> </div> -->
            </div>
            
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">所在嘎查（村）： <span class="main_color">{{ muHuDetailData.villageName }}</span></div>
              <!-- <div class="h_24 lh_24 mb_3">种植面积：<span class="main_color font_number fw_bold ls_2">214 ㎡</span> </div> -->
            </div>
            
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">
                <!-- 电话：<span class="main_color fw_bold font_number ls_2">{{ formatPhone(muHuDetailData.phone_number) }}</span> -->
              </div>
            </div>
            
            <!-- <div class="h_24 lh_24 mb_3">所在镇（苏木）： </div>
            <div class="h_24 lh_24 mb_3">所在嘎查（村）： </div>
            <div class="h_24 lh_24 mb_3">电话： </div> -->
          </div>
        </div>

        <div class="w_full h_49_p flex_column_between chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center">草料数量</div>
          <ban-bing-tu :value="data3" />
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_full chart_box_bgi">
          <div class="full border_radius_10 flex_column_between">
            <div class="w_full chart_title h_30 lh_30 text_center fs_18">
              牲畜列表
            </div>

            <div class="w_full h_full-50 scroll_box overflow_y_auto">
              <div 
                class="w_full flex_row_between cursor" 
                v-for="(item, index1) in testOxImg" :key="index1"
              >
                <div class="img_box w_25_p h_180">
                  <img class="w_full border_radius_10 response_img" src="../../../../assets/images/ba-lin-you-qi/xiao-niu-def.svg" alt="">
                </div>

                <div class=" w_75_p h_150 flex_column_around pl_20 color_fff">
                  <div class="fs_22">品种 : 西门塔尔牛 </div>
                  <div class="fs_22">状态 : 已免疫 </div>
                  <div class="fs_22">毛色 : 红百花 </div>
                  <div class="fs_22">性别 : 母 </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import BaLinYouQiMap from '../maps/baLinYouQiMap.vue'
  import { getMuHuDetail } from '@/config/api';
  import HaoRaoQinHamlet from '../maps/da-ban-hamlet/hao-rao-qin.vue';
  import BingTu from '../charts/bing-tu.vue';
  import KongXinBingTu from '../charts/kong-xin-bing-tu.vue';
  import BanBingTu from '../charts/ban-bing-tu.vue';
  import ZhuZhuangTu from '../charts/zhu-zhuang-tu.vue';
  
  export default {
    name: 'showPage1',
    components: { BigscreenHeader, BaLinYouQiMap, HaoRaoQinHamlet, BingTu, KongXinBingTu, BanBingTu, ZhuZhuangTu },
    data() {
      return {
        activeIndex: 0,
        makidoName: '',
        data1: {
          title: '',
          unit: '头、只',
          data: []
        },
        data2: {},
        data3: {},
        muHuDetailData: {},

        div1: {
          count1: 0,
          count2: 0,
          count3: 0,
          count4: 0,
          count5: 0,
          count6: 0,
          count7: 0,
          count8: 0,
          count9: 0,
          count10: 0,
          count11: 0,
          count12: 0,
          count13: 0,
          count14: 0,
          count15: 0,
        },

        muHuName: '',

        testOxImg: [
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img1.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img2.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img3.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img5.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img4.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img6.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img7.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img8.jpg') },
        ]
      }
    },
    mounted() {
      let muHuId = this.$route.params.muHuId
      this.muHuName = this.$route.params.muHuName

      // 通过牧户 id 获取 牧户详情信息
      this.getMuHuDetail(parseInt(muHuId))

      setTimeout(() => {
        this.initChart()
      }, 500)
    },
    methods: {
      // 初始化图表
      initChart() {
        if (this.muHuName == '杨景霞') {
          this.data1.data = [
            {name: "绵羊", value: 88, unit: ' '}
          ]
        } else if (this.muHuName == '黄占柱') {
          this.data1.data = [
            {name: "绵羊", value: 179, unit: ' '},
            {name: "山羊", value: 88, unit: ' '},
          ]
        } else if (this.muHuName == '黄波') {
          this.data1.data = [
            {name: "绵羊", value: 158, unit: ' '},
            {name: "山羊", value: 100, unit: ' '},
          ]
        } else if (this.muHuName == '韩琢') {
          this.data1.data = [
            {name: "绵羊", value: 40, unit: ' '},
            {name: "山羊", value: 60, unit: ' '},
          ]
        } else if (this.muHuName == '韩国勇') {
          this.data1.data = [
            {name: "绵羊", value: 80, unit: ' '},
            {name: "山羊", value: 280, unit: ' '},
          ]
        } else if (this.muHuName == '李俊成') {
          this.data1.data = [
            {name: "绵羊", value: 70, unit: ' '},
            {name: "山羊", value: 150, unit: ' '},
          ]
        } else if (this.muHuName == '薛文宝') {
          this.data1.data = [
            {name: "绵羊", value: 70, unit: ' '},
            {name: "山羊", value: 160, unit: ' '},
          ]
        } else if (this.muHuName == '李长合') {
          this.data1.data = [
            {name: "绵羊", value: 280, unit: ' '},
            {name: "家禽", value: 45, unit: ' '},
          ]
        } else if (this.muHuName == '尔灯孟和') {
          this.data1.data = [
            {name: "牛", value: 68, unit: ' '},
            {name: "山羊", value: 200, unit: ' '},
          ]
        } else if (this.muHuName == '额尔灯孟和') {
          this.data1.data = [
            {name: "牛", value: 88, unit: ' '},
            {name: "山羊", value: 62, unit: ' '},
          ]
        } else if (this.muHuName == '徐金坦') {
          this.data1.data = [
            {name: "牛", value: 58, unit: ' '},
          ]
        } else if (this.muHuName == '布和') {
          this.data1.data = [
            {name: "牛", value: 65, unit: ' '},
            {name: "绵羊", value: 8, unit: ' '},
            {name: "山羊", value: 10, unit: ' '},
          ]
        } else {
          this.data1.data = [
            {name: "牛", value: 65, unit: ' '},
            {name: "绵羊", value: 8, unit: ' '},
            {name: "山羊", value: 10, unit: ' '},
          ]
        }

        this.data1 = {...this.data1}

        this.data2 = {
          title: '机械数量',
          unit: '辆',
          data: [
            {name: "小型拖拉机", value: 2, unit: ' '},
            {name: "大型拖拉机", value: 1, unit: ' '},
            {name: "打草机", value: 1, unit: ' '},
            {name: "播种机", value: 1, unit: ' '},
            {name: "家用车辆", value: 2, unit: ' '}
          ]
        }

        this.data3 = {
          title: '草料数量',
          unit: '吨',
          data: [
            {name: "甘草", value: 10, unit: ' '},
            {name: "饲料", value: 25, unit: ' '},
            {name: "配料", value: 15, unit: ' '}
          ]
        }
      },

      // 跳转到 menu 页面
      goToMenuPage() {
        this.$router.push({
          path: "/bigscreen/menuPage"
        })
      },

      // 获取牧户详情
      async getMuHuDetail(id) {
        let res = await getMuHuDetail(id)
        this.muHuDetailData = res.data
      },

      // 前往 牛详情
      showOxDetail(index) {
        let id = this.muHuDetailData.cattle_list[index].id
        console.log(id);
        this.$router.push({
          path: "/bigscreen/oxDetail" + id
        })
      },

      // 格式化手机号 175 **** 4435
      formatPhone(val) {
        val = val.toString()
        return val.substring(0, 3) + '****' + val.substring(7, 12)
      }

    }
  }
</script>

<style scoped lang="less">
  .activeColor { color: #2366fc !important; }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .w_20_p { font-size: 18px; } 
  }
</style>
